<template>
  <div class="page">
    <RegisterView
      @handleAgree="handleAgree"
      @handleLogin="handleLogin"
      @handleRegister="handleRegister"
    />
  </div>
</template>
<script lang="ts">
import { CheckedEvent } from '@/model/type/CheckedEvent';
import { useLoginBasicStore, useLoginInforStore } from '@/store/login';
import { defineComponent, ref } from 'vue';
import RegisterView from './RegisterView.vue';

export default defineComponent({
  components: { RegisterView },
  setup() {
    // // 用户名
    // const userName = ref<string>('');
    // // 密码
    // const password = ref<string>('');
    // // 电话
    // const phone = ref<string>('');
    // 同意协议
    const agree = ref<boolean>(true);

    // Store
    const loginStore = useLoginInforStore();
    const loginBasicStore = useLoginBasicStore();

    // 事件
    const handleLogin = () => {
      loginBasicStore.changeShowLogin(true);
    };

    // 密码输入值改变
    const passwordChange = (e: InputEvent) => {
      // password.value = defaultInputHandler(e, password.value);
    };

    // 用户名改变
    const userNameChange = (e: InputEvent) => {
      // console.log('User name', e);
      // userName.value = defaultInputHandler(e, userName.value);
    };

    // 注册
    const handleRegister = (
      userName: string,
      password: string,
      phone: string,
    ) => {
      // if (password !== phone) return;
      loginStore.Register(userName, password, phone);
    };

    // 电话号码改变
    const phoneChange = (e: InputEvent) => {
      // phone.value = defaultInputHandler(e, phone.value);
    };

    // 同意状态改变
    const handleAgree = (e: CheckedEvent) => {
      console.log('handleAgree', e.target.checked);
    };

    return {
      // userName,
      // password,
      handleLogin,
      passwordChange,
      userNameChange,
      handleRegister,
      phoneChange,
      handleAgree,
    };
  },
});
</script>
<style lang="less" scoped></style>
